<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:wb="http://whitebyte.info/components"
	xmlns:c="http://java.sun.com/jsf/composite/composites"
	template="template.xhtml">

	<ui:define name="content">

		<h:outputStylesheet target="head" library="css" name="no_border.css" />

		<p:panel header="Comment Info" name="addComment">
			<p:panelGrid name="commentParameters">
				<p:row>
					<p:column style="width:60%">
						<h:form>
							
							<p:row>
								<p:panelGrid id="commentInfoPanelId" name="commentInfoPanel"
									columns="2" style="width:100%">

									<p:outputLabel for="user" value="User" />
									<h:outputText id="user"
										value="#{viewCommentBean.commentUser.name} #{viewCommentBean.commentUser.surname}" />

									<p:outputLabel for="comment" value="Comment" />
									<h:outputText id="comment" value="#{viewCommentBean.comment.comment}" />

									<p:outputLabel for="tags" value="Tags" />
									<h:outputText id="tags" value="#{viewCommentBean.comment.CSVTags}" />

								</p:panelGrid>
							</p:row>
						</h:form>
					</p:column>
					<p:column>
						<p:gmap center="#{viewCommentBean.place.centerInfo}" zoom="17"
							type="HYBRID" id="map" widgetVar="mapWidget"
							style="width:600px;height:400px" model="#{viewCommentBean.map}">

							<p:ajax event="overlaySelect"
								listener="#{viewCommentBean.onMarkerSelect}" global="false" />

							<p:gmapInfoWindow>
								<p:outputPanel
									style="text-align:center;display:block;margin:auto:">
									<h:outputText value="#{viewCommentBean.marker.title}" />
								</p:outputPanel>
							</p:gmapInfoWindow>
						</p:gmap>
					</p:column>
				</p:row>
			</p:panelGrid>
		</p:panel>


		<!-- MULTIMEDIA PART -->

		<p:panel header="Multimedia" toggleable="true" collapsed="false">

			<!-- PICTURE -->

			<p:panel header="Images" toggleable="true" collapsed="true"
				deferred="true">
				<h:form>
					<p:lightBox id="commentMedia_images" styleClass="imagebox">
						<ui:repeat value="#{viewCommentBean.mediaList}" var="media">
							<ui:fragment rendered="#{media.picture}">
								<h:outputLink
									value="/ourcity-ws/webservice/getMultimedia?id=#{media.multimediaID}">
									<h:graphicImage
										value="../ourcity-ws/webservice/getMultimedia?id=#{media.multimediaID}&amp;width=160&amp;height=90" />
									<p:spacer width="20" />
								</h:outputLink>
							</ui:fragment>
						</ui:repeat>
					</p:lightBox>

					<hr />

					<p:fileUpload rendered="#{viewCommentBean.myComment}"
						fileUploadListener="#{viewCommentBean.handleFileUpload}"
						mode="advanced" dragDropSupport="false" multiple="true"
						update="messages commentMedia_images" sizeLimit="150000"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

					<p:growl id="messages" showDetail="true" />
				</h:form>
			</p:panel>

			<!-- VIDEO -->

			<h:form>
				<p:panel id="videoPanel" header="Videos" toggleable="true"
					collapsed="true" deferred="true">
					<p:growl id="messages-videos" showDetail="true" life="3000" />

					<ui:repeat value="#{viewCommentBean.mediaList}" var="media">
						<ui:fragment rendered="#{media.video}">
							<h3>#{media.title} - #{media.owner.name}
								#{media.owner.surname}</h3>

							<iframe width="480" height="270" src="#{media.embedURL}"
								frameborder="0" allowfullscreen="true" />

						</ui:fragment>
					</ui:repeat>

					<hr />

					<h:panelGrid columns="2" columnClasses="column" cellpadding="5"
						rendered="#{viewCommentBean.myComment}">
						<p:inputText style="width:400px" id="videoURL" label="YouTube URL"
							value="#{viewCommentBean.videoURL}" placeholder="YouTube URL">
						</p:inputText>
						<p:commandButton value="Add Video" icon="ui-icon-plus"
							action="#{viewCommentBean.addVideoURL}"
							update="videoPanel videoURL messages-videos" />
					</h:panelGrid>

					<p:growl id="messages" showDetail="true" />
				</p:panel>
			</h:form>

			<!-- AUDIO -->

			<h:form>
				<p:growl id="messages-audios" showDetail="true" life="3000" />

				<p:panel id="audioPanel" header="Audios" toggleable="true"
					collapsed="true" deferred="true">
					<ui:repeat value="#{viewCommentBean.mediaList}" var="media">
						<ui:fragment rendered="#{media.audio}">
							<h4>#{media.title} - #{media.owner.name}
								#{media.owner.surname}</h4>

							<embed
								src="http://vocaroo.com/player.swf?playMediaID=#{media.path}&amp;autoplay=0"
								width="148" height="44" wmode="transparent"
								type="application/x-shockwave-flash" />
						</ui:fragment>
					</ui:repeat>

					<hr />

					<h:panelGrid columns="3" columnClasses="column" cellpadding="5"
						rendered="#{viewCommentBean.myComment}">
						<p:inputText style="width:300px" id="audioTitle" label="Audio URL"
							value="#{viewCommentBean.audioTitle}" placeholder="Title"
							required="true">
						</p:inputText>
						<p:inputText style="width:400px" id="audioURL" label="Vocaroo URL"
							value="#{viewCommentBean.audioURL}" placeholder="Vocaroo.com URL"
							required="true">
						</p:inputText>
						<p:commandButton value="Add Audio" icon="ui-icon-plus"
							action="#{viewCommentBean.addAudioURL}"
							update="audioPanel audioURL audioTitle messages-audios" />
					</h:panelGrid>

					<h:panelGroup rendered="#{loginBean.loggedIn}">
						Currenty, <a href="http://vocaroo.com">Vocaroo.com</a> is used for uploading audio to the system.
					</h:panelGroup>
				</p:panel>
			</h:form>
		</p:panel>
		

	</ui:define>
</ui:composition>
